<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.global.js"></script>
  <link rel="stylesheet" href="./index.css" />
  <link rel="stylesheet" href="./table.css" />
  <link rel="stylesheet" href="./gongzi.css" />
  <script src="./index.full.js"></script>

  <script>
    //适配代码
    (function (doc, win) {
      var docEI = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
        recalc = function () {
          var clientWidth = docEI.clientWidth;
          if (!clientWidth) return;
          //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
          docEI.style.fontSize = 100 * (clientWidth / 1536) + 'px';
        }

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script>
</head>

<body>
  <div id="app">
    <div class="container">
      <div class="top-content">
        <h2 class="top-title">中国水利水电第十四工程局有限公司引江补汉工程土建施工及金结机电安装8标项目经理部农民工进场承诺书</h2>
        <div class="people-top" style="margin-top: 0.1rem;display: flex; align-items:center;justify-content: center;">
          <div style="display: flex; align-items:center;justify-content: center;font-size: 0.14rem;">
            工人编号：<el-input v-model="enterForm.number" class="people-input" style="width: 2rem;"
              placeholder=" "></el-input>
          </div>
        </div>
      </div>

      <div class="table-content" style="text-align: left;">
        <div class="danger-info">
          本人
          <el-input v-model="enterForm.name" class="inputBorBot w10" placeholder=" "></el-input>
          （身份证号：<el-input v-model="enterForm.idNumber" class="inputBorBot w20" placeholder=" "></el-input>）
          是<el-input v-model="enterForm.company" class="inputBorBot w20" placeholder=" "></el-input>
          公司承建的<el-input v-model="enterForm.project" class="inputBorBot w30" placeholder=" "></el-input>
          项目<el-input v-model="enterForm.group" class="inputBorBot w20" placeholder=" "></el-input> 班组的工人。本人郑重承诺并保证做到：
        </div>
        <div class="danger-info">
          一、知悉公司的各项规章制度、保障农民工工资支付规范化管理等内容，自愿配合公司落实实名制管理、专用账户管理、总包代发工资等工资支付保障制度。
        </div>
        <div class="danger-info">
          二、如实提供个人身份信息，严格落实考勤制度，进场前签订劳务用工合同，退场签署工人退场确认书。劳务用工合同、入场承诺书、考勤表（工作量表）、工资支付表、退场确认书，劳务用工合同签领表等由本人亲笔签字。
        </div>
        <div class="danger-info">
          三、公司用于发放工资的银行卡由本人试用和保管。本人定期与班组长核实确认每月出勤天数（工作量）和工资，核对在维权信息公示牌上的工资表和考勤表（工作量表），不虚报出勤（工作量），不冒领工资，否则由本人自愿承担相应法律和经济责任。
        </div>
        <div class="danger-info">
          四、当本人合法权益受到侵害时（如劳资纠纷、工伤事故纠纷等），向公司申诉或向总包单位（项目部）请求协调解决，在处理无效的情况下，依法向有关部门举报投诉或向人民法院提起诉讼。自觉遵守法律法规，决不采取闹访、围攻围堵公共设施和相关单位等非法过激行为，决不恶意或过激讨薪，通过合法途径理性反映诉求。如有无理或非法行为愿意承担一切法律责任。
        </div>
        <div class="danger-info">
          特此承诺。
        </div>
        <div class="danger-info" style="margin: 0.5rem 0; ">
          此页无正文
        </div>
        <div class="danger-info">
          附件：身份证复印件
        </div>
        <div class="danger-info" style="display: flex;justify-content: flex-end;align-items: center;">
          承诺人（签字并加按指印）：<el-input v-model="enterForm.group" class="w20" placeholder=" "></el-input>
        </div>
        <div class="danger-info" style="display: flex;justify-content: flex-end;align-items: center;">
          <el-input v-model="enterForm.year" class="w6" placeholder=" "></el-input> 年
          <el-input v-model="enterForm.month" class="w5" placeholder=" "></el-input> 月
          <el-input v-model="enterForm.day" class="w5" placeholder=" "></el-input> 日
        </div>
        <div class="danger-info" style="display: flex;justify-content: flex-end;align-items: center;">
          <div class="imgBox" style="border: 1px solid #000;padding: 0.1rem;margin-right: 0.1rem;">
            <img class="imgInner" style="height: 2.2rem;" src="peopleForm.idCardFront" alt="">
          </div>
          <div class="imgBox" style="border: 1px solid #000;padding: 0.1rem;">
            <img class="imgInner" style="height: 2.2rem;" src="peopleForm.idCardVerso" alt="">
          </div>
        </div>
      </div>


    </div>
  </div>

  </div>
  <script>
    const {
      createApp,
      reactive,
      toRefs
    } = Vue;
    const vue3Composition = {
      setup() {
        const topForm = reactive({
          number: "",
          company: "",
          name: '',
          job: "喷浆"
        })

        const enterForm = reactive({
          number: "",
          name: "",
          idNumber: "",
          company: "",
          project: "",
          group: "",
          year: "",
          month: "",
          day: "",
          idCardFront: "",
          idCardVerso: "",


        })


        return {
          topForm,
          enterForm,
        }
      }

    }
    const app = createApp(vue3Composition).use(ElementPlus).mount('#app');
  </script>
</body>
<style>
  * {
    /* margin: 0;
    padding: 0; */
    font-size: 0.15rem;
  }

  .top-content {
    text-align: center;
  }

  .top-img {
    display: block;
    width: 1.5rem;
    margin: auto;
  }

  .top-title {
    width: 60%;
    line-height: 0.42rem;
    font-size: 0.26rem;
    word-spacing: 10px;
    margin: 0.5rem auto 0 auto;
  }

  .top-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-input {
    width: 200px;
  }

  .top-input .el-input__wrapper {
    box-shadow: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    text-align: center;
  }

  .top-input .el-input__inner {
    text-align: center;
  }

  .top-text span {
    display: inline-block;
    font-size: 0.22rem;
    width: 1rem;
    text-align: justify;
    text-align-last: justify;
  }

  .top-company {
    font-size: 0.2rem;
    word-spacing: 10px;
  }

  .table-content {
    margin: 0.1rem auto;
  }
</style>

</html>